import { Component } from 'react';

// 监听屏幕变化，动态调整高度
export default class FixedWrap extends Component {
  componentDidMount() {
    window.addEventListener('resize', this.onResize);
    this.onResize();
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.onResize);
  }

  onResize = () => {
    if (!this.wrap) {
      return;
    }
    this.style = {
      width: this.wrap.offsetWidth,
    };
    this.setState({}, () => {
      if (this.con) {
        this.wrapStyle = {
          height: this.con.offsetHeight,
        };
      }
    });
  };

  render() {
    const { children, ...props } = this.props;

    if (this.con) {
      this.wrapStyle = {
        height: this.con.offsetHeight,
      };
    }
    return (
      <>
        <div
          ref={(n) => {
            this.wrap = n;
          }}
          style={this.wrapStyle}
        ></div>
        <div
          ref={(n) => {
            this.con = n;
          }}
          style={this.style}
          {...props}
        >
          {children}
        </div>
      </>
    );
  }
}
